<template>
    <div id="menus1">
        <el-card>
            <div slot="header">
                <span>菜单管理</span>
                <el-button type="primary" @click="dlVisible=true;formMenus.parent_id=0;getMenus">添加顶级菜单</el-button>
            </div>
            <!-- 下拉菜单 -->
            <el-tree v-loading="loading" :data="menus" :props="{label:'menu_name',children:'children'}" >
                <span slot-scope="{data,node}">
                    <i :class="data.icon"></i>
                    {{data.menu_name}}

                     <el-button type="success" size="mini" @click=" dlVisible=true;formMenus.parent_id=data.id" >添加下级菜单</el-button>

                    <el-button type="text" size="mini" @click.stop="edlVisible=true;eformMenus=data" icon="el-icon-edit">编辑</el-button>
                    <el-button type="text" size="mini" @click.stop="del(data.id)" icon="el-icon-cancel">删除</el-button>

                    <el-button type="text" @click.stop="sort(data.id,'up')" icon="el-icon-arrow-up"></el-button>
                     <el-button type="text" @click.stop="sort(data.id,'down')" icon="el-icon-arrow-down"></el-button>
                </span>
            </el-tree>
        </el-card>

        <el-dialog
          title="编辑大纲"
          :visible="edlVisible"
          width="40%"
          :show-close="false">
          
          <el-form :model="eformMenus" ref="eformMenus" label-width="120px" :rules="rules">
            <el-form-item label="名称" prop="menu_name" >
              <el-input v-model="eformMenus.menu_name"></el-input>
            </el-form-item>
             <el-form-item label="图标" prop="icon">
              <el-input v-model="eformMenus.icon"></el-input>
            </el-form-item>
            <el-form-item label="路由" prop="router">
              <el-input v-model="eformMenus.router"></el-input>
            </el-form-item>
             <el-form-item label="是否显示到导航" prop="status">
              <el-select v-model="eformMenus.status" placeholder="">
                <el-option label="显示" value="1" checked> </el-option>
                <el-option label="不显示" value="0"></el-option>
              </el-select> 
            </el-form-item>
          </el-form>

          <span slot="footer">
            <el-button @click="ecancel">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog
          title="添加大纲"
          :visible="dlVisible"
          width="40%"
          @close="cancel">
          
          <el-form :model="formMenus" ref="formMenus" label-width="120px" :rules="rules">
            <el-form-item label="名称" prop="menu_name" >
              <el-input v-model="formMenus.menu_name"></el-input>
            </el-form-item>
             <el-form-item label="图标" prop="icon">
              <el-input v-model="formMenus.icon"></el-input>
            </el-form-item>
            <el-form-item label="路由" prop="router">
              <el-input v-model="formMenus.router"></el-input>
            </el-form-item>
             <el-form-item label="是否显示到导航" prop="status">
              <el-select v-model="formMenus.status" placeholder="">
                <el-option label="显示" value="1" checked> </el-option>
                <el-option label="不显示" value="0"></el-option>
              </el-select>
              
            </el-form-item>
          </el-form>
          

          <span slot="footer">

           

            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
        
    </div>
</template>
<script>
export default {
  data() {
    return {
      dlVisible: false,
      edlVisible: false,
      loading: false,
      menus: [],
      formMenus: {
        outline_name: "",
        parent_id: "",
        status: "1",
        icon: "el-icon-info"
      },
      eformMenus: {
        outline_name: "",
        status: "1",
        icon: "",
        id:''
      },
      rules: {
        menu_name: [
          {
            validator: (rule, val, callback) => {
              this.axios.get(`/menus/exists/menu_name/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getMenus();
  },
  methods: {
    edit(){
      this.axios.put(`/menus/edit/${this.eformMenus.id}`,{
        menu_name:this.eformMenus.menu_name,
        icon:this.eformMenus.icon,
        status:this.eformMenus.status
      }).then(()=>{
        this.$message.success("编辑成功");
        this.edlVisible = false;
        this.$refs.eformMenus.resetFields();
        this.getMenus();
      })
    },
    ecancel(){
       this.edlVisible = false;
      this.$refs.eformMenus.resetFields();
    },
    cancel() {
      this.dlVisible = false;
      this.$refs.formMenus.resetFields();
    },
    add() {
      this.axios.post("/menus/add", this.formMenus).then(() => {
        this.$message.success("添加成功");
        this.dlVisible = false;
        this.$refs.formMenus.resetFields();
        this.getMenus();
      });
    },
    sort(id, dir) {
      this.axios.put(`/menus/sort/${id}/${dir}`).then(() => {
        this.getMenus();
      });
    },
    del(id) {
      this.$confirm("确定删除吗？", "提示")
        .then(() => {
          this.axios
            .delete(`/menus/del/${id}`)
            .then(() => {
              this.$message.success("删除成功");
              this.getMenus();
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {});
    },
    getMenus() {
      this.loading = true;
      this.axios
        .get("/menus")
        .then(ret => {
          this.loading = false;
          this.menus = ret.data;
        })
        .catch(() => {
          this.$message.error("菜单获取失败");
        });
    }
  }
};
</script>
<style>
#menus1 .el-tree-node__content {
  padding: 10px;
  margin: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#menus1 .el-button--success {
  margin-left: 50px;
}
</style>

